import { Component, Host, h, Prop } from '@stencil/core';
import { IbzExpCalendarController } from '../../controllers';

interface IToolbarItem {
  text: string;
  key: string;
}
/**
 * 导航日历
 *
 * @author chitanda
 * @date 2021-06-22 13:06:46
 * @export
 * @class IBzExpCalendar
 */
@Component({
  tag: 'ibz-exp-calendar-bar',
  styleUrl: 'ibz-exp-calendar-bar.scss',
})
export class IBzExpCalendarBar {
  /**
   * 控制器
   *
   * @type {IbzExpCalendarController}
   * @memberof IBzExpCalendarBar
   */
  @Prop()
  ctrl: IbzExpCalendarController;

  /**
   * 工具栏项配置
   *
   * @type {IToolbarItem[]}
   * @memberof IBzExpCalendarBar
   */
  toolbarItems: IToolbarItem[] = [{ text: '今天', key: 'today' }];

  /**
   * 工具栏项点击
   *
   * @param {IToolbarItem} toolbarItem
   * @memberof IBzExpCalendarBar
   */
  toolBarItemClick(toolbarItem: IToolbarItem) {
    if(toolbarItem.key === 'today'){
      this.ctrl.today();
    }
  }

  /**
   * 绘制内容
   *
   * @return {*}
   * @memberof IBzExpCalendarBar
   */
  render() {
    return (
      <Host class={{'ibz-exp-calendar-bar': true, 'blue': this.ctrl.theme.toLowerCase() === 'blue' }}>
        {this.toolbarItems.map((toolbarItem: IToolbarItem) => {
          return (
            <a class='bar-item' onClick={() => this.toolBarItemClick(toolbarItem)}>
              {toolbarItem.text}
            </a>
          );
        })}
      </Host>
    );
  }
}
